<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>表白墙</title>
        <script src="jquery.min.js"></script>
    </head>

    <body>
        <div style="width: 100%; text-align: center;">
            <h2>表白墙</h2>
            谁&nbsp;&nbsp;&nbsp;<input type="text" id="userName" name="" id="">
            <p></p>
            对谁&nbsp;&nbsp;<input type="text" id="touserName" name="" id="">
            <p></p>
            说什么：<input type="text" id="message" name="" id="">
            <p></p>
            <input type="button" value=" 提 交 " onclick="mySub()" name="" id="">
            <div id="div_allmsg">

            </div>
        </div>


        <script>
            function mySub() {
                //在原生的js中获取控件的时候是没有#的，但是在jQuery框架中是要加上#的
                //userName只是一个控件，没有值之类的
                var iptUserName = jQuery("#userName");
                var iptTouserName = jQuery("#touserName");
                var iptMsg = jQuery("#message");
                //1.非空效验
                if (iptUserName.val().trim() == "") {
                    alert("请先输入您的名字！");
                    //如果弹出的页面将光标遮挡住了，此时focus就会把这个光标进行恢复
                    iptUserName.focus();
                    return;
                }
                if (iptTouserName.val().trim() == "") {
                    alert("请输入对方的名字！");
                    //如果弹出的页面将光标遮挡住了，此时focus就会把这个光标进行恢复
                    iptTouserName.focus();
                    return;
                }
                if (iptMsg.val().trim() == "") {
                    alert("请先输入内容！");
                    //如果弹出的页面将光标遮挡住了，此时focus就会把这个光标进行恢复
                    iptMsg.focus();
                    return;
                }
                //2.将内容显示到表白墙页面上
                jQuery("#div_allmsg").append(iptUserName.val() + " 对 " + iptTouserName.val() + " 说：" + iptMsg.val() + "<p></p>");

                //3.清空输入的内容
                iptUserName.val("");
                iptTouserName.val("");
                iptMsg.val("");

            }
        </script>
    </body>

</html>